<template>
  <div class="container">
    <el-table
      :data="layout"
      style="width: 100%">
      <el-table-column
        prop="fileName"
        label="文件名"
        width="1200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleOpen(scope.row)">{{ scope.row.fileName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-popconfirm
            title="确认删除？"
            @confirm="handleDelete(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-delete"
            >删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <div style="display: flex; justify-content: flex-end; margin-top: 20px">
      <el-pagination
        v-show="total>0"
        :total="total"
        background
        @current-change="searchLog"
        :current-page.sync="search.currentPage"
        :page-size.sync="search.size"
        layout="total, prev, pager, next"
      />
    </div>

    <el-dialog
      :title="this.currentFile.fileName"
      :visible.sync="centerDialogVisible"
      width="70%"
      center>
      <el-form ref="form" :model="currentFile">
        <editor @init="editorInit"
                :options="options"
                lang="sh"
                theme="cobalt"
                height="600"
                v-model="currentFile.fileContent">
        </editor>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import {getLogs, deleteLog} from '@/api/user'

export default {
  data() {
    return {
      total: 0,
      search: {
        currentPage: 1,
        size: 10
      },
      layout: [],
      currentFile: {
        fileName: '',
        filePath: '',
        fileContent: ''
      },
      centerDialogVisible: false,
      options: {/*vue2-ace-editor编辑器配置自动补全等*/
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true,/*自动补全*/
        readOnly: true
      },
      logFiles: []
    }
  },
  created() {
    this.getLogList()
  },
  methods: {
    searchLog() {
      let skip = (this.search.currentPage - 1) * 10
      this.layout = []
      for (let i = skip, j = 0; i < skip + 10 && i < this.logFiles.length; i++, j++) {
        this.layout[j]=this.logFiles[i]
      }
    },
    handleDelete(file) {
      console.log(file)
      deleteLog(file).then(res=>{
        if (res.data) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.centerDialogVisible = false
          this.getLogList()
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        }
      })
    },
    handleOpen(file) {
      this.currentFile = file
      this.content = file.fileContent
      this.centerDialogVisible = true
    },
    getLogList() {
      getLogs().then(res => {
        this.logFiles = res.data
        this.total = this.logFiles.length
        this.searchLog()
      })
    },
    editorInit() {
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/sh')    //language
      require('brace/theme/cobalt')
    }

  },
  components: {
    editor: require('vue2-ace-editor')
  },
}
</script>

<style scoped>
.container {
  padding: 50px;
  display: flex;
  flex-direction: column;
}

editor {
  padding: 50px;
  display: flex;
}
</style>
